import { Button, Card, Input, Form, InputNumber, Radio } from 'antd';
import { connect } from 'umi';
import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import db from '@/utils/localstorage';
const FormItem = Form.Item;

const BasicForm = props => {
  const { submitting } = props;
  const [form] = Form.useForm();

  const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 7,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 12,
      },
      md: {
        span: 10,
      },
    },
  };
  const submitFormLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 10,
        offset: 7,
      },
    },
  };

  const onFinish = async () => {
    const values = await form.validateFields();
    const { dispatch } = props;
    values.venueId = props.match.params.id
    dispatch({
      type: 'cubeSite/add',
      payload: values,
    });
  };

  return (
    <PageHeaderWrapper>
      <Card bordered={false}>
        <Form
          style={{
            marginTop: 8,
          }}
          form={form}
          name="basic"
        >
          <FormItem
            {...formItemLayout}
            label="场地名称"
            name="name"
            rules={[
              {
                required: true,
                message: '请输入场地名称',
              },
            ]}
          >
            <Input placeholder="请输入" />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="容纳人数"
            name="accommodationNumber"
            rules={[
              {
                required: true,
                message: '请输入容纳人数',
              },
            ]}
          >
            <InputNumber
              placeholder="请输入"
              min={0}
            />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="用途"
            name="usePurpose"
            rules={[
              {
                required: true,
                message: '请选择用途',
              },
            ]}
          >
            <Radio.Group>
              {
                db.get("dictTypeList") && db.get("dictTypeList")["course_type"].reverse().map((item, index) => {
                  return <Radio value={item.value} key={index}>{item.label}</Radio>
                })
              }
            </Radio.Group>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="状态"
            name="status"
            rules={[
              {
                required: true,
                message: '请选择场馆状态',
              },
            ]}
          >
            <Radio.Group>
              <Radio value="1">
                正常
              </Radio>
              <Radio value="2">
                暂停
              </Radio>
            </Radio.Group>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="排序"
            name="orderNum"
            rules={[
              {
                required: true,
                message: '请输入排序',
              },
            ]}
          >
            <InputNumber
              placeholder="请输入"
              min={0}
            />
          </FormItem>
          <FormItem
            {...submitFormLayout}
            style={{
              marginTop: 32,
            }}
          >
            <Button type="primary" onClick={onFinish} loading={submitting}>
              提交
            </Button>
            <Button
              style={{
                marginLeft: 8,
              }}
              onClick={() => window.history.back()}
            >
              返回
            </Button>
          </FormItem>
        </Form>
      </Card>
    </PageHeaderWrapper>
  );
};

export default connect(({ loading }) => ({
  submitting: loading.effects['cubeSite/add'],
}))(BasicForm);
